<div class="layui-form layui-form-pane mine-view">
    <div class="layui-form-item">
        <div class="avatar-add" style="float: left">
            <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过30KB</p>
            <div class="upload-img">
                <input type="file" name="image" id="LAY-file" lay-title="上传头像">
            </div>
            <div class="prevue">
                <div>
                    <img src="{$myInfo.avatar}">
                </div>
            </div>

            <span class="loading"></span>
        </div>
        <div style="float: right; width: 400px">
            <img class="crop-img" style="max-height: 373px;" src="">
        </div>

    </div>
</div>

<link rel="stylesheet" type="text/css" href="/static/jcrop/jquery.Jcrop.min.css"/>
<script src="/static/jcrop/jquery.Jcrop.min.js"></script>
<style>
    .jcrop-holder > div > div {
        border-radius: 100%;
    }

    .jcrop-holder img {
        max-width: none;
    }

    .jcrop-holder .avatar_select {
        margin-top: -10px;
        margin-left: -10px;
    }
</style>
<script>

    var crop_image = function (info) {
        console.log(info)
        var $obj = $('.avatar-add').parent().find('.crop-img');
        console.log($obj)
        $obj.on('load', function () {
            $obj.Jcrop({
                aspectRatio: 1,
                onDblClick: function (e) {

                    var $this = this;
                    var crop1 = $this.tellScaled();
                    var bounds = $this.getBounds();
                    var boundx = bounds[0];
                    var boundy = bounds[1];
                    var crop = {x: crop1.x / boundx, y: crop1.y / boundy, w: crop1.w / boundx, h: crop1.h / boundy};

                    $.post("{:url('core/file/cropAvatar')}", {
                        picture_id: info.id,
                        crop: JSON.stringify(crop),
                    }, function (res) {
                        $('.prevue').find('img').attr('src', res.data.path);
                        toast.success('头像上传成功')

                    }, 'json')
                },
                minSize: [10, 10],
                setSelect: [0, 0, 256, 256]
            }, function () {
            });
        })
    };

</script>